<template>
  <div class="content">
    <div>{{ props }}</div>
    <div>{{ props.num1 }}</div>
    <div>{{ props.num2 }}</div>
    <!-- <div>{{ props.num3 }}</div>  -->
    <!--    
      <div>{{ num1 }}</div>
      <div>{{ num2 }}</div> -->
  </div>
  {{ ruleForm }}
</template>
<script lang="ts" setup>
type TProps = {
  num1: number
  num2?: number
}
import { ref, withDefaults } from 'vue'
// withDefaults 设置props默认值
// withDefaults 获取的数据不要使用解构, 解构会丢失响应式, 但用对象接收则不会
let props = withDefaults(defineProps<TProps>(), { num1: 262524, num2: 46464 })
// let {num1, num2} = withDefaults(defineProps<{
//   num1: Number,
//   num2?: Number
// }>(),{num2: 46464})
const ruleForm = ref('')
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  height: 300px;
  background-color: #bfa;
}
</style>
